<template>
  <el-container>
    <el-form ref="resetForm" :model="resetForm" :rules="resetRules" label-width="80px" class="reset-form">
      <el-form-item label="用户类型" prop="userType" v-show="false">
        <el-input v-model="resetForm.userType" />
      </el-form-item>
      <el-form-item label="用户账号" prop="userName" v-show="false">
        <el-input v-model="resetForm.userName" />
      </el-form-item>
      <div style="margin-bottom: 10px;">请选择您的身份验证方式：</div>
      <el-form-item prop="verifyMode">
        <el-radio-group v-model="resetForm.verifyMode">
          <el-radio border :disabled="(resetForm.userEmail == '' || resetForm.userEmail == null ) ? true : false " label="1">电子邮箱</el-radio>
          <el-radio border :disabled="(resetForm.userPhone == '' || resetForm.userPhone == null ) ? true : false " label="2">手机验证</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="resetForm.verifyMode == 1">
        <div style="margin-bottom: 10px;">目前您账号绑定的邮箱为： <span style="color: #00afff">{{resetForm.userEmail}}</span> </div>
        <el-form-item label="确认邮箱" prop="confirmUserEmail">
          <el-input v-model="resetForm.confirmUserEmail" type="text" placeholder="请输入确认邮箱" maxlength="30" show-word-limit style="width: 60%"/>
          <el-button type="primary" plain :disabled="resetForm.confirmUserEmail == ''|| resetForm.confirmUserEmail.length < 5"
                     @click="getEmailCode" style="margin-left: 10px;">{{btnText}}</el-button>
        </el-form-item>
        <el-form-item label="验证码" prop="verifyCode" >
          <el-input v-model="resetForm.verifyCode" :disabled="verifyFlag" auto-complete="off" placeholder="请输入邮箱验证码" style="width: 60%" >
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
      </div>
      <div v-if="resetForm.verifyMode == 2">
        <div style="margin-bottom: 10px;">目前您账号绑定的手机为： <span style="color: #00afff">{{resetForm.userPhone}}</span> </div>
        <el-form-item label="确认手机" prop="confirmUserPhone">
          <el-input v-model="resetForm.confirmUserPhone" type="text" placeholder="请输入确认手机" maxlength="11" show-word-limit style="width: 60%"/>
          <el-button type="primary" plain :disabled="(resetForm.confirmUserPhone == ''|| resetForm.confirmUserPhone.length != 11)"
                     @click="getMobileCode" :loading="isLoading" style="margin-left: 10px;">{{btnText}}</el-button>
        </el-form-item>
        <el-form-item label="验证码" prop="verifyCode" >
          <el-input v-model.trim="resetForm.verifyCode" :disabled="verifyFlag" auto-complete="off" placeholder="请输入手机验证码" style="width: 60%" >
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
      </div>
      <el-form-item prop="isReading">
        <el-checkbox v-model="resetForm.isReading" ref="isReading">
          我已阅读并同意<a href="" target="_blank">《服务协议》</a><a href="" target="_blank">《隐私条款》</a>
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="info" plain @click="handleLastStep">上一步</el-button>
        <el-button type="primary" :disabled="handleNextStepFlag" @click="handleNextStep">下一步</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
import {getUserInfo} from "@/api/resetPassword";

export default {
  name: "stepTwo",
  props: {
    stepsParentData: Object,
  },
  data() {
    return {
      verifyFlag: true,
      handleNextStepFlag: true,
      resetForm: {
        verifyMode: "",
        userType: "",
        userName: "",
        userEmail: "",
        userPhone: "",
        confirmUserEmail: "",
        confirmUserPhone: "",
        verifyCode: "",
        isReading: false, // 协议是否阅读
      },
      resetRules:{
        verifyMode: [{ required: true, trigger: "change", message: "请选择验证方式" }],
        userType: [{ required: true, trigger: "change", message: "请选择用户类型" }],
        userName: [{ required: true, trigger: "blur", message: "请输入用户账号" }],
        userEmail: [{ required: true, trigger: "blur", message: "邮箱不能为空" },],
        userPhone: [{ required: true, trigger: "blur", message: "手机不能为空" },],
        confirmUserEmail: [{ required: true, trigger: "blur", message: "请输入确认邮箱" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }
        ],
        confirmUserPhone: [{ required: true, trigger: "blur", message: "请输入确认手机" },
          { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        verifyCode: [{ required: true, trigger: "change", message: "请输入验证码" }],
      },
      btnText: '获取验证码', // 获取验证码按钮文字
      time: 60, // 短信验证码时间
      isLoading: false, // 短信验证码按钮是否显示加载中
    };
  },
  created() {
    this.setData();
  },
  methods: {
    setData(){
      this.resetForm = {...this.resetForm, ...this.stepsParentData};
      console.log(JSON.stringify(this.resetForm))
    },
    // 点击上一步
    handleLastStep() {
      this.$emit('handleLastStep')
    },
    // 点击下一步
    handleNextStep() {
      this.$refs.resetForm.validate(valid => {
        if (valid) {
          if(this.resetForm.isReading){
            console.log('submit Form')
            getUserInfo(this.resetForm).then(res => {
              this.$emit('handleNextStep')
            }).catch(() => {
            })
          } else {
            this.$message.error('请阅读并同意相关协议')
          }
        }
      });
    },
    getEmailCode(){
      this.$refs.resetForm.validateField(["verifyMode", "userType", "userName", "confirmUserEmail"] ,(errorMessage) => {
        if (!errorMessage){
          // 当校验通过时，这里写逻辑代码；发送接口请求，验证码按钮进入倒计时状态
        }
      });
    },
    getMobileCode(){
      let validateFiledList = [];
      this.$refs.resetForm.validateField(["verifyMode", "userType", "userName", "confirmUserPhone"] ,(errorMessage) => {
        if (!errorMessage){
          validateFiledList.push(errorMessage);
          if (validateFiledList.length == 4 && validateFiledList.every((item) => item === "")) {
            // 当校验通过时，这里写逻辑代码；发送接口请求，验证码按钮进入倒计时状态
            // 发送接口请求后按钮进入倒计时状态
            /**
             * 时间开始倒数
             * 按钮进入禁用状态
             * 如果倒计时结束 按钮恢复可用状态 按钮文字变成重新发送 把倒计时时间重置
             * 倒计时的过程中 按钮文字显示为 多少s后重新发送
             */
            let timer = setInterval(() => {
              this.time--; // 时间进入倒计时
              this.btnText = `${this.time}s后重新发送`;
              this.isLoading = true; // 按钮显示加载中
              this.verifyFlag = false; // 允许输入验证码
              this.handleNextStepFlag = false; //允许下一步
              if (this.time === 0){
                this.btnText = '重新发送';
                this.time = 60; // 重置时间
                this.isLoading = false; // 重置加载按钮
                this.verifyFlag = true; // 拒绝输入验证码
                this.handleNextStepFlag = true; //拒绝下一步
                clearInterval(timer)
              }
            }, 1000);
          }
        }
      })
    },
  }
};
</script>
